<template>
  <div>
    <div class="box">
      <!-- 头部form表单 -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline form_top"
      >
        <el-form-item
          label="设备编号:"
          extra
          style="font-size: 14px; font-weight: 400"
        >
          <el-input v-model="formInline.innerCode" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="formbutton"
            @click="sousuo"
          >查询</el-button>
        </el-form-item>
      </el-form>

      <!-- form表单下按钮 -->
      <div class="button_top">
        <!-- table表格 -->
        <el-table
          v-loading="loading"
          size="mini"
          :data="tableData"
          style="width: 100%"
          class="table_top"
          :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
        >
          <el-table-column prop="id" size="mini" label="序号" width="80px" />
          <el-table-column
            size="mini"
            prop="innerCode"
            label="设备编号"
            align="center"
          />
          <el-table-column
            size="mini"
            prop="type.name"
            label="设备型号"
            align="center"
          />
          <el-table-column
            size="mini"
            prop="node.name"
            label="详细地址"
            align="center"
          />
          <el-table-column
            size="mini"
            prop="vmStatus"
            label="运营状态"
            align="center"
          >
            <template #default="{ row }">
              <span>{{
                row.vmStatus === 1
                  ? '运营'
                  : row.vmStatus === 0
                    ? '未投放'
                    : '撤机'
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            size="mini"
            prop="address"
            label="设备状态"
            align="center"
          >
            <template>
              <div class="xiaox">
                <span class="lixian">离线</span>
                <span class="lixiasn">货道</span>
                <span class="lixiasn">传动轴</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template #default="{ row }">
              <el-button
                type="text"
                class="button_table_foot"
                @click="chaKanXiangQing(row)"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="foot">
          <p>
            共{{ totalCount }}条记录 第 {{ yeshu.pageIndex }}/{{ totalPage }}
            页
          </p>
          <div class="foot_button">
            <el-button
              type="primary"
              plain
              class="foot_button_top"
              :disabled="yeshu.pageIndex <= 1 ? true : false"
              @click="handleSizeChange"
            >上一页</el-button>
            <el-button
              type="success"
              plain
              class="foot_button_foot"
              :disabled="yeshu.pageIndex >= totalPage ? true : false"
              @click="handleCurrentChange"
            >下一页</el-button>
          </div>
        </div>

        <!-- 弹窗 -->
        <el-dialog title="设备详情" :visible.sync="dialogTableVisible">
          <div class="bushisde">
            <div class="tanchaung">
              <div class="xiuxhou">
                销售量: <span class="shouziya">{{ xiaoliang }} 个</span>
              </div>
              <div class="xiuxhou">
                销售额: <span class="shouziya">{{ xiaoliang }}  个</span>
              </div>
              <div class="xiuxhou">
                补货次数: <span class="shouziya">{{ xiaoshouliangya }} 次</span>
              </div>
              <div class="xiuxhou">
                维修次数: <span class="shouziya">{{ weixiuchishu }} 次</span>
              </div>
            </div>
          </div>
          <div class="xiaoshouliang">商品销售量（ 月 ）</div>
          <div class="wuxingdu_sdasdas">
            <div v-for="(item,index) in xiaoshouliang" :key="index" class="weiyou">
              <div class="xueliya">{{ item.skuName }}</div>
              <div class="shusdnsa_sd">: {{ item.count }}</div>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { add, salesVolume, weiXiuCiShu, xiaoShouLiangya } from '@/api/equipment'
export default {
  name: 'ZhuangTai',
  data() {
    return {
      dialogTableVisible: false,
      loading: true,
      totalCount: null,
      yeshu: { pageIndex: '1', pageSize: '10', innerCode: '' },
      tanChuan: { innerCode: null, start: '2023-01-01', end: '2023-06-15', vmType: null, nodeId: null, createUserId: null },
      xiaoshouliang: [],
      totalPage: null,
      formInline: {
        upageIndex: '1',
        pageSize: '10',
        innerCode: '',
        status: null
      },
      tableData: [], // 源
      weixiuchishu: '',
      xiaoshouliangya: '',
      xiaoliang: 0
    }
  },
  created() {
    this.houqu()
  },
  methods: {
    // 数据
    async houqu() {
      this.loading = true
      const data = await add(this.yeshu)
      this.tableData = data.currentPageRecords
      this.loading = false
      this.totalCount = data.totalCount
      this.totalPage = data.totalPage
    },

    // 换页
    async handleSizeChange() {
      this.loading = true
      this.yeshu.pageIndex--
      const data = await add(this.yeshu)
      this.tableData = data.currentPageRecords
      this.loading = false
    },
    async handleCurrentChange() {
      this.loading = true
      this.yeshu.pageIndex++
      const data = await add(this.yeshu)
      this.tableData = data.currentPageRecords
      this.loading = false
    },

    // 搜索
    async sousuo() {
      this.loading = true
      const data = await add(this.formInline)
      this.tableData = data.currentPageRecords
      this.loading = false
    },
    // 详情
    async chaKanXiangQing(row) {
      this.dialogTableVisible = true
      this.tanChuan.createUserId = row.createUserId
      this.tanChuan.nodeId = row.nodeId
      this.tanChuan.vmType = row.vmType
      this.tanChuan.innerCode = row.innerCode
      // const date = new Date()
      // const year = date.getFullYear().toString()
      // // 获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
      // const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()
      // // 获取天，判断是否小于10，如果是在字符串前面拼接'0'
      // const day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
      // const tempEnd = year + '-' + month + '-' + day // 当天
      // const tempStart = year + '-' + month + '-01' // 当月第一天
      // this.tanChuan.start = tempEnd
      // this.tanChuan.end = tempStart
      const xiuxi = await salesVolume(this.tanChuan)
      let list = 0
      xiuxi.forEach(item => {
        list += item.count
      })
      this.xiaoliang = list
      this.xiaoshouliang = xiuxi
      const weixiu = await weiXiuCiShu(this.tanChuan)
      this.weixiuchishu = weixiu
      const xiaoshouliangya = await xiaoShouLiangya(this.tanChuan)
      this.xiaoshouliangya = xiaoshouliangya
    }
  }
}
</script>

<style scoped lang="scss">
.bushisde {
  height: 54px;
  background: rgba(227, 233, 245, 0.39);
  font-size: 14px;
  .tanchaung {
    display: flex;
    padding: 20px 20px 30px;
    text-align: center;
    .xiuxhou {
      flex: 1;
      .shouziya {
        color: #5f84ff;
        margin: 10px;
      }
    }
  }
}
.xiaoshouliang {
  margin: 20px;
}
.wuxingdu_sdasdas {
  display: flex;
  flex-wrap: wrap;
  .weiyou {
    padding: 0 10px;
    border: 1px solid #d8dde3;
    display: flex;
    .xueliya {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      line-height: 40px;
      width: 70px;
    }
    .shusdnsa_sd {
      line-height: 40px;
      width: 46px;
    }
  }
}

.xiaox {
  display: flex;
  padding: 0 auto;
  .lixian {
    display: block;
    background: #ff665f linear-gradient(135deg, #ffb043, #ffc020);
    height: 23px;
    padding: 0 12px;
    margin: 0 10px;
    border-radius: 14px;
    text-align: center;
    color: #fff;
    line-height: 23px;
  }
  .lixiasn {
    display: block;
    background: #ff665f linear-gradient(135deg, #3fc997, #4bda98);
    height: 23px;
    padding: 0 12px;
    margin: 0 10px;
    border-radius: 14px;
    text-align: center;
    color: #fff;
    line-height: 23px;
  }
}

.box {
  margin: 10px 15px 0 15px;
  .demo-form-inline.form_top {
    height: 60px;
    background-color: #fff;
    padding-top: 11px;
    padding-left: 20px;
    .formbutton {
      background-color: #5f84ff;
    }
  }
  .button_top {
    color: #000;
    margin-top: 15px;
    background-color: #fff;
    padding-left: 15px;
    padding-top: 15px;
    margin-bottom: 15px;
    .touXiang {
      display: block;
      width: 26px;
      height: 26px;
      object-fit: cover;
      border-radius: 50%;
      background: #f3f6fb;
      border: 1px solid #f3f6fb;
      margin: 0 auto;
    }
    .buttonbodytop {
      border: 0px;
      background-color: #ff883a;
    }
    .buttonbodyfoot {
      border: 0px;
      background-color: #fbf4f0;
      color: #655b56;
    }
    .table_top {
      margin-top: 15px;
      .button_table_foot {
        color: #5f84ff;
      }
    }
    .foot {
      display: flex;
      justify-content: space-between;

      margin-top: 40px;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 30px;
      p {
        color: #dbdfe5;
      }
      .foot_button {
        height: 30px;
        line-height: 30px;
        .foot_button_top {
          margin-right: 15px;
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
        .foot_button_foot {
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
      }
    }
  }
}
</style>
